<template>
  <page-header-wrapper :title="false">
    <div class="Role">
      <a-spin tip="加载中..." class="position" v-if="roleLoading"> </a-spin>
      <a-modal
        width="35%"
        v-model="modleVisible"
        :title="currentRow.id ? '开通' : '编辑' + '充电卡（联网）'"
        @cancel="() => (this.modleVisible = false)"
        :confirm-loading="formButtonDisableFlag"
        @ok="onSubmit"
      >
        <div class="modalContent">
          <div class="formAspin" v-if="editWaitForLoading">
            <a-spin />
          </div>
          <a-form-model
            style="width: 100%"
            ref="formRef"
            :model="form"
            :rules="rules"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 12 }"
          >
            <InputNumber :form="form" label="客户卡号" :readonly="form.id?true:false" prop="cardNo" placeholder="请输入客户卡号"></InputNumber>
            <Input :form="form" label="客户姓名" prop="clientName" placeholder="请输入客户姓名"></Input>
            <treeSelect
              :form="form"
              label="所属组织"
              prop="deptId"
              placeholder="请选择组织机构"
              :treeData="organizationsTree"
            ></treeSelect>
            <InputNumber :form="form" label="手机号码" prop="clientPhone" placeholder="请输入手机号码"></InputNumber>
            <InputNumber :form="form" label="账户余额" prop="balance" readonly v-if="form.id"></InputNumber>
            <InputNumber :form="form" label="赠送金额" prop="balanceGive" readonly v-if="form.id"></InputNumber>
            <Textarea :form="form" label="备注" prop="clientAddress" placeholder="请输入备注"></Textarea>
          </a-form-model>
        </div>
      </a-modal>
      <a-modal
        width="30%"
        v-model="changeVisible"
        title="换卡"
        @cancel="() => (this.changeVisible = false)"
        :confirm-loading="changeButtonDisableFlag"
        @ok="changeSubmit"
      >
        <div class="modalContent">
          <div class="formAspin" v-if="editWaitForLoading">
            <a-spin />
          </div>
          <a-form-model
            style="width: 100%"
            ref="changeFormRef"
            :model="changeForm"
            :rules="changeRules"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 20 }"
          >
            <Input :form="changeForm" label="当前卡号" prop="cardNo" readonly></Input>
            <Input :form="changeForm" label="新卡号" prop="newCardNo" placeholder="请输入新卡号"></Input>
          </a-form-model>
        </div>
      </a-modal>
      <typicalSearch ref="insideSearch" :searchConfig="searchConfig" @searchMethod="getTableData"></typicalSearch>
      <div class="table">
        <div class="tableTitle">
          <div class="title">卡管理列表</div>
          <div class="addButton">
            <a-button type="primary" @click="handleAdd()"> 新增 </a-button>
          </div>
        </div>
        <div class="tableList">
          <typicalTable
            ref="insideTable"
            :tableConfig="tableConfig"
            :tableData="tableData"
            @getTableData="getTableData"
          >
            <template v-slot="slotProps">
              <Button label="编辑" @click="handleAdd(slotProps.record)"></Button>
              <Button label="明细" @click="handleEdit(slotProps.record, 1)"></Button>
              <Button label="扣费" @click="handleEdit(slotProps.record, 2)"></Button>
              <Button type="start" label="换卡" @click="handleChange(slotProps.record)"></Button>
              <a-popconfirm
                slot="action"
                title="此操作将该卡解挂，是否继续?'"
                ok-text="是"
                cancel-text="否"
                @confirm="handleRow(slotProps.record, 'type3')"
              >
                <Button type="start" v-if="slotProps.record.status == 3" label="解挂"></Button>
              </a-popconfirm>

              <a-popconfirm
                slot="action"
                title="此操作将该卡挂失，是否继续?'"
                ok-text="是"
                cancel-text="否"
                @confirm="handleRow(slotProps.record, 'type3')"
              >
                <Button
                  type="stop"
                  v-if="slotProps.record.status != 3 && slotProps.record.status != 5"
                  label="挂失"
                ></Button>
              </a-popconfirm>

              <a-popconfirm
                slot="action"
                title="此操作将该卡冻结，是否继续?'"
                ok-text="是"
                cancel-text="否"
                @confirm="handleRow(slotProps.record, 'type4')"
              >
                <Button
                  type="stop"
                  v-if="slotProps.record.status != 3 && slotProps.record.status != 4 && slotProps.record.status != 5"
                  label="冻结"
                ></Button>
              </a-popconfirm>

              <a-popconfirm
                slot="action"
                title="此操作将该卡解冻，是否继续?"
                ok-text="是"
                cancel-text="否"
                @confirm="handleRow(slotProps.record, 'type4')"
              >
                <Button
                  type="start"
                  v-if="slotProps.record.status == 4 && slotProps.record.status != 5"
                  label="解冻"
                ></Button>
              </a-popconfirm>

              <a-popconfirm
                slot="action"
                :title="slotProps.record.status == 5 ? '此操作将该卡恢复，是否继续?' : '此操作将该卡作废，是否继续?'"
                ok-text="是"
                cancel-text="否"
                @confirm="handleRow(slotProps.record, 'type5')"
              >
                <Button type="stop" label="作废" v-if="slotProps.record.status != 5"></Button>
                <Button type="stop" label="恢复" v-if="slotProps.record.status == 5"></Button>
              </a-popconfirm>
            </template>
          </typicalTable>
        </div>
      </div>

      <!-- 明细弹框 -->
      <div class="Role rightBlock">
        <a-spin tip="加载中..." class="position" v-if="editWaitForLoading"> </a-spin>
        <a-modal width="60%" v-model="detailVisible" :title="handleType == 1 ? '充值明细' : '消费/扣费记录'">
          <div id="importContent">
            <div class="formAspin" v-if="editWaitForLoading">
              <a-spin />
            </div>
            <div class="tableList">
              <a-row>
                <a-col :span="7" style="margin-top: 1%">
                  <h3 style="text-align: center">客户信息：</h3>
                  <a-form-model
                    ref="importFormRef"
                    :model="importForm"
                    :rules="importRules"
                    :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 18 }"
                  >
                    <a-row type="flex" justify="space-between">
                      <a-col :span="24">
                        <Input :form="importForm" readonly label="客户卡号" prop="cardNo"></Input>
                      </a-col>
                      <a-col :span="24">
                        <Input :form="importForm" readonly label="客户姓名" prop="clientName"></Input>
                      </a-col>
                      <a-col :span="24">
                        <Input :form="importForm" readonly label="手机号码" prop="clientPhone"></Input>
                      </a-col>
                      <a-col :span="24">
                        <Input :form="importForm" readonly label="备注" prop="clientAddress" placeholder=""></Input>
                      </a-col>
                      <a-col :span="24">
                        <Input :form="importForm" readonly label="注册时间" prop="createTime"></Input>
                      </a-col>
                      <a-col :span="24">
                        <Input :form="importForm" readonly label="余额" prop="balance" suffix="元"></Input>
                      </a-col>
                      <a-col :span="24">
                        <InputNumber
                          :min="0.01"
                          :form="importForm"
                          :label="handleType == 1 ? '充值金额' : '扣费金额'"
                          prop="money"
                          suffix="元"
                          :precision="2"
                          :placeholder="handleType == 1 ? '请输入充值金额' : '请输入扣费金额'"
                        ></InputNumber>
                      </a-col>
                      <a-col :span="24" style="text-align: center">
                        <a-button v-if="handleType == 1" type="primary" @click="handleCharge()"> 充值 </a-button>
                        <a-button v-if="handleType == 2" type="primary" @click="handleCharge()"> 扣费 </a-button>
                      </a-col>
                    </a-row>
                  </a-form-model>
                </a-col>
                <a-col :span="16" style="margin-left: 4%" v-if="handleType == 1">
                  <typicalSearch
                    class="cardRecords"
                    ref="detailSearch"
                    :searchConfig="detailSearchConfig"
                    @searchMethod="getDetailList"
                  ></typicalSearch>
                  <typicalTable
                    ref="insideDetailTable"
                    :tableConfig="detailTableConfig"
                    :tableData="detailTableData"
                    @getTableData="getDetailList"
                  ></typicalTable>
                </a-col>
                <a-col :span="16" style="margin-left: 4%" v-else>
                  <typicalSearch
                    class="cardRecords chargeRecords"
                    ref="chargeDetailSearch"
                    :searchConfig="chargeDetailSearchConfig"
                    @searchMethod="getChargeDetailList"
                  ></typicalSearch>
                  <typicalTable
                    ref="chargeDetailInsideTable"
                    :tableConfig="chargeDetailTableConfig"
                    :tableData="chargeDetailTableData"
                    @getTableData="getChargeDetailList"
                  ></typicalTable>
                </a-col>
              </a-row>
            </div>
          </div>
          <template slot="footer">
            <a></a>
          </template>
        </a-modal>
      </div>
    </div>
  </page-header-wrapper>
</template>
<script>
import moment from 'moment';
import typicalSearch from '@/components/typicalSearch';
import typicalTable from '@/components/typicalTable';
import typicalLeftTree from '@/components/typicalLeftTree';
import Input from '@/components/typicalControl/Input';
import InputNumber from '@/components/typicalControl/InputNumber';

import Textarea from '@/components/typicalControl/textarea';
import Button from '@/components/typicalControl/button';
import treeSelect from '@/components/typicalControl/treeSelect';

import { cardManage, organizationsTree } from '@/api/system';
export default {
  name: 'RoleManage',
  components: {
    typicalSearch: typicalSearch,
    typicalTable: typicalTable,
    typicalLeftTree: typicalLeftTree,
    Input: Input,
    InputNumber: InputNumber,
    Button: Button,
    Textarea: Textarea,
    treeSelect: treeSelect,
  },
  data() {
    return {
      formButtonDisableFlag: false, // 表单确定禁用按钮 防止多次点击多次保存
      editWaitForLoading: false, // 加载编辑回显数据等待Loading
      roleLoading: false, // 加载表格的loading
      modleVisible: false, // 控制弹框
      form: {
        cardNo: undefined,
        clientName: undefined,
        clientPhone: undefined,
        clientAddress: undefined,
        deptId: undefined,
      },
      changeForm: {
        newCardNo: '',
        cardNo: '',
        clientId: '',
      },
      rules: {
        // 规则验证
        cardNo: [{ required: true, message: '请输入客户卡号', trigger: 'blur' }],
        deptId: [{ required: true, message: '请选择所属组织', trigger: 'change' }],
        clientName: [
          { required: true, message: '请输入客户姓名', trigger: 'blur' },
          { max: 20, message: '最大长度不能超过20个字', trigger: 'blur' },
        ],
        clientPhone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            pattern: /^1(3[0-9]|4[01456879]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\d{8}$/,
            message: '请输入正确格式的手机号码',
            trigger: 'blur',
          },
        ],
      },
      changeRules: {
        newCardNo: [{ required: true, message: '请输入新卡号', trigger: 'blur' }],
      },
      // 搜索组件配置
      searchConfig: {
        formItemList: [
          {
            type: 'input',
            prop: 'cardNo',
            value: '',
            label: '卡片编码',
          },
          {
            type: 'input',
            prop: 'clientName',
            value: '',
            label: '客户名称',
          },
          {
            type: 'input',
            prop: 'clientHpone',
            value: '',
            label: '手机号码',
          },
        ],
        parent: this,
      },
      // 列表组件配置
      tableConfig: {
        columns: [
          {
            title: '客户卡号',
            dataIndex: 'cardNo',
            ellipsis: true,
          },
          {
            title: '客户名称',
            dataIndex: 'clientName',
            ellipsis: true,
          },
          {
            title: '手机号码',
            dataIndex: 'clientPhone',
            ellipsis: true,
          },
          {
            title: '注册时间',
            dataIndex: 'createTime',
            ellipsis: true,
            customRender: this.formatterTime,
          },
          {
            title: '状态',
            dataIndex: 'status',
            ellipsis: true,
            width: '70px',
            customRender: this.formatterStatus,
          },
          {
            title: '账户余额',
            dataIndex: 'balance',
            ellipsis: true,
            width: '90px',
          },
          {
            title: '操作',
            scopedSlots: { customRender: 'action' },
            ellipsis: true,
            width: '300px',
          },
        ],
        pageSize: this.$store.state.user.defaultPaginationPagesize,
        pageSizeOptions: this.$store.state.user.defaultPaginationOptions,
        parent: this,
      },
      detailTableConfig: {
        columns: [
          {
            title: '充值时间',
            dataIndex: 'payTime',
            ellipsis: true,
            customRender: this.formatterTime,
          },
          {
            title: '充值金额',
            dataIndex: 'payAmount',
            ellipsis: true,
          },
          {
            title: '充值途径',
            dataIndex: 'payWay',
            ellipsis: true,
            customRender: this.formatterPayWay,
          },
          {
            title: '操作人',
            dataIndex: 'operationMan',
            ellipsis: true,
          },
        ],
        pageSize: 10,
        pageSizeOptions: ['5', '7', '10'],
        // parent: this,
      },
      detailSearchConfig: {
        formItemList: [
          {
            type: 'select',
            prop: 'monthCount',
            value: 6,
            label: '近几个月记录',
            optList: [
              { name: '1个月', code: 1 },
              { name: '2个月', code: 2 },
              { name: '3个月', code: 3 },
              { name: '4个月', code: 4 },
              { name: '5个月', code: 5 },
              { name: '6个月', code: 6 },
              { name: '7个月', code: 7 },
              { name: '8个月', code: 8 },
              { name: '9个月', code: 9 },
              { name: '10个月', code: 10 },
              { name: '11个月', code: 11 },
              { name: '12个月', code: 12 },
            ],
          },
        ],
        parent: this,
      },
      chargeDetailSearchConfig: {
        formItemList: [
          {
            type: 'select',
            prop: 'monthCount',
            value: 6,
            label: '近几个月记录',
            optList: [
              { name: '1个月', code: 1 },
              { name: '2个月', code: 2 },
              { name: '3个月', code: 3 },
              { name: '4个月', code: 4 },
              { name: '5个月', code: 5 },
              { name: '6个月', code: 6 },
              { name: '7个月', code: 7 },
              { name: '8个月', code: 8 },
              { name: '9个月', code: 9 },
              { name: '10个月', code: 10 },
              { name: '11个月', code: 11 },
              { name: '12个月', code: 12 },
            ],
          },
          {
            type: 'select',
            prop: 'type',
            value: 0,
            label: '类型',
            optList: [
              // 0 代表全部：1 充电扣费；2 业务扣费；3业务清零
              { name: '全部', code: 0 },
              { name: '充电扣费', code: 1 },
              { name: '业务扣费', code: 2 },
              { name: '业务清零', code: 3 },
            ],
          },
        ],
        parent: this,
      },
      chargeDetailTableConfig: {
        columns: [
          {
            title: '类型',
            dataIndex: 'type',
            ellipsis: true,
            width: '80px',
            customRender: this.formatterType,
          },
          {
            title: '发生时间',
            dataIndex: 'payTime',
            ellipsis: true,
            customRender: this.formatterTime,
          },
          {
            title: '消费/扣费金额',
            dataIndex: 'deductBalance',
            ellipsis: true,
          },

          {
            title: '余额',
            dataIndex: 'accountBalance',
            ellipsis: true,
          },
          {
            title: '操作人',
            dataIndex: 'operationMan',
            ellipsis: true,
          },
        ],
        pageSize: 10,
        pageSizeOptions: ['5', '7', '10'],
        parent: this,
      },
      // 列表组件数据
      tableData: {
        records: [],
        total: 0,
      },
      detailTableData: {
        records: [],
        total: 0,
      },
      chargeDetailTableData: {
        records: [],
        total: 0,
      },
      detailVisible: false,
      currentRow: {},
      importForm: {
        clientName: '',
        cardNo: '',
        clientPhone: '',
        clientAddress: '',
        createTime: '',
        balance: '',
        money: null,
      },

      importRules: {
        money: [{ required: true, message: '请输入金额', trigger: 'blur' }],
      },
      handleType: null,
      changeVisible: false,
      changeButtonDisableFlag: false,
      organizationsTree: [], //组织机构
      monthCount: 6,
      searchType: 0,
    };
  },
  created() {
    this.getDictionary();
  },
  mounted() {
    this.$refs.insideSearch.searchInfo();
  },
  methods: {
    getDictionary() {
      // 组织列表树形结构数据
      organizationsTree().then((res) => {
        if (res.code == 200) {
          this.organizationsTree = res.data;
        }
      });
    },
    /**
     * [getTableData 获取表格数据]
     * @param  {[type]} searchParam [搜索条件]
     * @return {[type]}             [description]
     */
    getTableData(searchParam) {
      if (!searchParam) throw new Error('getTableData 没有入参搜索条件！');
      this.roleLoading = true;
      let { clientName, cardNo, clientHpone } = searchParam;
      let param = {
        clientName: clientName ? clientName : '',
        cardNo: cardNo ? cardNo : '',
        clientHpone: clientHpone ? clientHpone : '',
      };
      cardManage(
        `/pileBase/clientinfo/listClientInfo?pageNum=${searchParam.pageNumber + 1}&pageSize=${searchParam.pageSize}`,
        'post',
        param
      )
        .then((res) => {
          if (res.status == 0) {
            this.tableData.records = res.rows;
            this.tableData.total = +res.total;
          } else {
            this.tableData.records = [];
            this.tableData.total = 0;
          }
        })
        .finally(() => {
          this.roleLoading = false;
        });
    },

    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.formButtonDisableFlag = true;
          this.cardAdd();
        } else {
          return false;
        }
      });
    },
    changeSubmit() {
      if (this.changeForm.cardNo == this.changeForm.newCardNo) {
        this.$message.error('新卡号与当前卡号不能一致');
        return;
      }
      this.$refs.changeFormRef.validate((valid) => {
        if (valid) {
          this.changeButtonDisableFlag = true;
          this.changeCard();
        } else {
          return false;
        }
      });
    },
    changeCard() {
      this.editWaitForLoading = true;
      cardManage('/pileControl/cardInfo/updateCardNoById', 'post', {
        clientId: this.currentRow.id,
        newCardNo: this.changeForm.newCardNo,
      })
        .then((res) => {
          if (res.status == 0) {
            this.$message.success('操作成功');
            this.changeVisible = false;
            this.$refs.insideTable.updateListData();
          }
        })
        .finally(() => {
          this.editWaitForLoading = false;
          this.changeButtonDisableFlag = false;
        });
    },

    /**
     * [initializationForm 初始化form数据]
     * @return {[type]} [description]
     */
    initializationForm() {
      return {
        cardNo: undefined,
        clientName: undefined,
        clientPhone: undefined,
        clientAddress: undefined,
        deptId: undefined,
      };
    },

    /**
     * @description: 新增角色权限
     * @param {object} addRoleParam 表单参数
     */
    cardAdd() {
      let params = {...this.form};
      if(!this.form.id){
        params.balance =0;
        params.balanceGive =0;
      }
      cardManage('/pileBase/clientinfo/saveClientInfo', 'post', params)
        .then((res) => {
          if (res.status == 0) {
            this.$message.success('操作成功');
            this.modleVisible = false;
            this.$refs.insideTable.updateListData();
          }
        })
        .finally(() => {
          this.formButtonDisableFlag = false;
        });
    },

    /**
     * @description: 表单新增编辑成功后的公共的代码 （消息提示 搜索框重置 请求表格数据）
     * @param {object} successFormData 表单请求成功后返回的对象
     */
    formSuccessOperation(successFormData) {
      this.modleVisible = false;
      this.$refs.insideTable.updateListData();
    },
    handleAdd(row) {
      this.modleVisible = true;
      this.form = this.initializationForm();
      if (row.id) {
        this.currentRow = row;
        let { id, cardNo, clientName, clientPhone, clientAddress, deptId ,balanceGive,balance} = row;
        this.form = { id, cardNo, clientName, clientPhone, clientAddress, deptId ,balanceGive,balance};
      }
    },

    async handleEdit(row, type) {
      this.currentRow = row;
      this.handleType = type ? type : null;
      if (type) {
        this.detailVisible = true;
        // this.importForm = { ...row };
        let datas = await cardManage('/pileBase/clientinfo/findClientInfo', 'post', { id: row.id });
        this.importForm = datas.data;
        this.$nextTick(() => {
          if (type == 1) {
            this.getDetailList();
          } else {
            this.getChargeDetailList();
          }
        });
      }
    },

    getDetailList(searchParam) {
      this.monthCount = searchParam && searchParam.monthCount ? searchParam.monthCount : 6;
      this.editWaitForLoading = true;
      let param = { clientId: this.currentRow.id, monthCount: this.monthCount };
      let page = searchParam && searchParam.pageNumber ? searchParam.pageNumber + 1 : 1;
      let size = searchParam && searchParam.pageSize ? searchParam.pageSize : 10;
      cardManage(`/pileBase/sys/findByClientIdList?pageNum=${page}&pageSize=${size}`, 'post', param)
        .then((res) => {
          if (res.status == 0) {
            this.detailTableData.records = res.rows;
            this.detailTableData.total = +res.total;
          } else {
            this.detailTableData.records = [];
            this.detailTableData.total = 0;
          }
        })
        .finally(() => {
          this.editWaitForLoading = false;
        });
    },
    getChargeDetailList(searchParam) {
      this.monthCount = searchParam && searchParam.monthCount ? searchParam.monthCount : 6;
      let page = searchParam && searchParam.pageNumber ? searchParam.pageNumber + 1 : 1;
      let size = searchParam && searchParam.pageSize ? searchParam.pageSize : 10;

      if (searchParam&&(searchParam.type || searchParam.type === 0)) {
        this.searchType = searchParam.type;
      }
      else{
        this.searchType =0;
      }
      this.editWaitForLoading = true;
      let param = {
        clientId: this.currentRow.id,
        monthCount: this.monthCount,
        type: this.searchType,
      };
      cardManage(
        `/pileBase/sys/listClientConsumption?pageNum=${page}&pageSize=${size}`,
        'post',
        param
      )
        .then((res) => {
          if (res.status == 0) {
            this.chargeDetailTableData.records = res.rows;
            this.chargeDetailTableData.total = +res.total;
          } else {
            this.chargeDetailTableData.records = [];
            this.chargeDetailTableData.total = 0;
          }
        })
        .finally(() => {
          this.editWaitForLoading = false;
        });
    },

    handleRow(row, type) {
      let status = null;
      if (type == 'type5' && row.status == 5) {
        //恢复
        status = 1;
      } else if (type == 'type5' && row.status != 5) {
        //作废
        status = 5;
      } else if (type == 'type4' && row.status == 4) {
        //解冻
        status = 1;
      } else if (type == 'type4' && row.status != 4) {
        //冻结
        status = 4;
      } else if (type == 'type3' && row.status != 3) {
        //挂失
        status = 3;
      } else if (type == 'type3' && row.status == 3) {
        //解卦
        status = 1;
      }
      cardManage('/pileControl/cardInfo/updateCardStatus', 'post', {
        clientId: row.id,
        money: 0,
        moneyGive: 0,
        status: status,
      }).then((res) => {
        if (res.status == 0) {
          this.$message.success('操作成功');
          this.$refs.insideTable.updateListData();
        }
      });
    },
    // 换卡
    handleChange(row) {
      this.changeVisible = true;
      this.changeForm = {
        newCardNo: '',
        cardNo: '',
        clientId: '',
      };

      this.currentRow = row;
      this.changeForm.cardNo = row.cardNo;
      this.changeForm.clientId = row.id;
    },

    formatterTime(val) {
      return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : '';
    },
    formatterStatus(val) {
      let statusData = {
        0: '注册',
        1: '在用',
        2: '停用',
        3: '挂失',
        4: '冻结',
        5: '作废',
      };
      return statusData[val];
    },
    formatterPayWay(val) {
      let statusData = {
        1: '现金',
        2: '支付宝',
        3: '微信',
      };
      return statusData[val];
    },
    formatterType(val) {
      // 0 代表全部：1 充电扣费；2 业务扣费；3业务清零
      let statusData = {
        1: '充电扣费',
        2: '业务扣费',
        3: '业务清零',
      };
      return statusData[val];
    },
    handleCharge() {
      let msg = this.handleType == 1 ? '充值' : '扣费';
      this.$refs.importFormRef.validate((valid) => {
        if (valid) {
          this.$confirm({
            title: '提示',
            content: (h) => `确定要给该卡片${msg}吗？`,
            onOk: () => this.doCharge(),
            centered: true,
            maskClosable: true,
          });
        } else {
          return false;
        }
      });
    },
    doCharge() {
      let msg = this.handleType == 1 ? '充值' : '扣费';
      cardManage('/pileControl/cardInfo/updateBalanceById', 'post', {
        clientId: this.currentRow.id,
        money: this.handleType == 1 ? this.importForm.money : 0 - this.importForm.money,
        moneyGive: 0,
      }).then((res) => {
        if (res.status == 0) {
          this.$message.success(`${msg}成功`);
          this.importForm.money = null;
          cardManage('/pileBase/clientinfo/findClientInfo', 'post', { id: this.currentRow.id }).then((res) => {
            this.importForm = res.data;
          });

          this.$nextTick(() => {
            if (this.handleType == 1) {
              // this.importForm.balance =Number(this.importForm.balance;
              this.$refs.detailSearch.searchInfo();
            } else {
              this.$refs.chargeDetailSearch.searchInfo();
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.Role {
  width: 100%;
  height: calc(100vh - 150px);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  .position {
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
  .table {
    flex: 1;
    background: white;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    .tableTitle {
      width: 100%;
      height: 64px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ececec;
      padding: 0 20px;
      margin-bottom: 10px;
      .title {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 550;
      }
      .addButton {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    .tableList {
      /deep/ .tableScroll {
        max-height: calc(100vh - 380px);
        overflow: auto;
      }
    }
  }
}
.modalContent {
  width: 100%;
  display: flex;
  position: relative;
  .formAspin {
    position: absolute;
    width: 100%;
    height: 400px;
    background: #ececec;
    border-radius: 4px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modalContentForm {
    width: 50%;
    height: 100%;
    border-right: 1px solid #ececec;
    display: flex;
    flex-direction: column;
    .modalContentFormTitle {
      width: 100%;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }
    .modalContentFormContent {
      padding: 0 0 0 20px;
      flex: 1;
    }
    .modalContentFormContent /deep/ .ant-form-item-label {
      display: inline-block;
      overflow: hidden;
      line-height: 39.9999px;
      white-space: nowrap;
      text-align: right;
      vertical-align: middle;
      width: 100px;
    }
  }
}
/deep/ .ant-input {
  padding: 4px 6px;
}
.cardRecords {
  /deep/ .ant-col-6 {
    width: 45%;
  }
  /deep/ .ant-col-18 {
    width: 54%;
  }
}
.chargeRecords {
  /deep/ .ant-row-flex-space-between {
    justify-content: flex-start;
  }
  /deep/ .ant-col-6 {
    width: 35%;
    justify-content: flex-start;
  }
  /deep/ .ant-col-6:first-child .ant-form-item-label {
    width: 50%;
  }
  /deep/ .ant-col-6:first-child .ant-form-item-control-wrapper {
    width: 50%;
  }

  /deep/ .ant-col-12 {
    width: 30%;
  }
}
</style>
